<template>
  <Row :gutter="10" style="padding: 0; background: transparent">
    <Col span="12">
      <Card title="UAT环境" size="small">
        <template #extra>
          <Button type="primary" shape="round" @click="copyValues('uat', uat)"> <CopyFilled />复制 </Button>
        </template>
        <h5>已提交的单据统计</h5>
        <Table border :columns="columns" rowKey="Name" :data-source="uat.submits" :bordered="true" :pagination="false" size="middle"></Table>

        <h5>已审核的单据统计</h5>
        <Table border :columns="columns" rowKey="Name" :data-source="uat.audits" :bordered="true" :pagination="false" size="middle"></Table>
      </Card>
    </Col>
    <Col span="12">
      <Card title="正式环境" size="small">
        <template #extra>
          <Button shape="round" type="primary" @click="copyValues('prod', prod)"> <CopyFilled />复制 </Button>
        </template>
        <h5>已提交的单据统计</h5>
        <Table bordered :columns="columns" :data-source="prod.submits" :bordered="true" :pagination="false" size="middle"></Table>

        <h5>已审核的单据统计</h5>
        <Table border :columns="columns" :data-source="prod.audits" :bordered="true" :pagination="false" size="middle"></Table>
      </Card>
    </Col>
  </Row>
</template>
<script setup>
  import { reactive, inject, onMounted } from 'vue';

  import dayjs from 'dayjs';
  import { CopyFilled } from '@ant-design/icons-vue';
  import { Row, Col, Card, Button, Table } from 'ant-design-vue';

  const http = inject('$http');
  const message = inject('$message');
  const copyText = inject('$copyText');

  const columns = reactive([
    { title: '名称', dataIndex: 'Name', width: 180 },
    { title: '值', dataIndex: 'Value' }
  ]);
  const uat = reactive({
    submits: [],
    audits: []
  });

  const prod = reactive({
    submits: [],
    audits: []
  });

  function submits(env) {
    http.get(`/api/iworkflow/${env}/statistics/submits`).then(res => {
      (env == 'uat' ? uat : prod).submits = res.datas;
    });
  }

  function audits(env) {
    http.get(`/api/iworkflow/${env}/statistics/audits`).then(res => {
      (env == 'uat' ? uat : prod).audits = res.datas;
    });
  }

  function copyValues(type, datas) {
    let date = dayjs().format('YYYY/MM/DD');

    copyText(`${date}\t${type.toUpperCase()}\t${datas.submits[0].Value || 0}\t${datas.audits[0].Value || 0}\t0\t0`).then(() => {
      message.success('结果已复制！');
    });
  }

  onMounted(() => {
    submits('uat');
    audits('uat');

    submits('prod');
    audits('prod');
  });
</script>

<style lang="less" scoped>
  .ant-card-body {
    > h5 {
      font-size: 15px;
      font-weight: bolder;
      margin-top: 15px;
      padding: 0 10px;

      &:first-of-type {
        margin-top: 0;
      }
    }

    .ant-table-wrapper {
      margin: 0;
      padding: 0;
    }
  }
</style>
